{% extends 'video/videos/index.html' %}
{% block head1 %}

{% endblock %}
{% block main%}
<div id="videoShowPage" class="container">
    <div class="columns" id="video">
        <div class="column is-offset-2 is-8">
            <figure class="image is-4by3">
                <video id="video-play" controls playsinline class="video-js vjs-default-skin vjs-big-play-centered"
                       poster="{{ 视频封面 }}">
                    <source src="/media/{{video.file}}" type="video/mp4">
                   <p class="vjs-no-js">
                        To view this video please enable JavaScript, and consider upgrading to a
                        web browser that
                    </p>
                </video>
            </figure>
            
            <div class="tabs is-centered mb-3">
                <ul>
                    <template v-for="(item, index) in cdns" :key="index">
                        <li :class="{'is-active': index === line}">

                        </li>
                    </template>
                                            <li>
                            <a href="/video/viewhd/1324736152"></a>
                        </li>
                                    </ul>
            </div>
            
            <div class="content">
                <h1 class="is-size-5">{{ video.name }}</h1>

                    <nav class="tabs">
                    <ul class="ml-0 mt-1">
                        <li class="mr-auto is-flex">
                            <div class="is-clickable mr-4" @click="toggle('likes', isLikes)">
                                <span class="icon mr-0"><i class="fas fa-thumbs-up" :class="{'is-active':isLikes}"></i></span>
                                <span>{{likes}}</span>
                            </div>
                            <div class="is-clickable mr-4" @click="toggle('dislikes', isDislikes)">
                                <span class="icon mr-0"><i class="fas fa-thumbs-down" :class="{'is-active':isDislikes}"></i></span>
                                <span>{{dislikes}}</span>
                            </div>
                            <div class="is-clickable mr-4" @click="toggle('favorites', isFavorites)">
                                <span class="icon mr-0"><i class="fas fa-heart" :class="{'is-active':isFavorites}"></i></span>
                                <span>{{favorites}}</span>
                            </div>
                        </li>
                        <li :class="{'is-active': tab === 1}">
                            <a href="javascript:" class="px-1" @click="tab=1">
                                <span class="icon mr-0"><i class="1728d0 fas fa-download"></i></span>
                                <span class="is-hidden-mobile">下载</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
            <div class="block" v-if="tab === 0">
                <div class="content is-size-7">
                    <span class="icon"><i class="fas fa-user"></i></span>
                    <a href="{{ 作者地址 }}"> {{ video.user }} </a>
                    <span class="icon"><i class="fas fa-calendar-day"></i></span>
                    {{ video.createdate|date:"Y年m月d日" }}                    <div class="is-pulled-right">
                        {{ video.click_num }}次播放
                    </div>
                </div>
            </div>

        </div>
    </div>
    

    <div class="block">
        <h5 class="7ddd6f has-text-weight-bold">视频推荐</h5>
    </div>
    <div class="block">
        
<div class="columns is-multiline is-mobile is-variable is-2-tablet is-1-mobile" id="rd5">
                            
<div class="column is-one-quarter-tablet is-half-mobile py-1">
    <article class="card is-shadowless">
        <div class="card-image is-clipped">
            <a href="/video/view/3da1ba5fcd81857a7b53">
                <figure class="image is-5by3 is-relative">
                    <img loading="lazy" alt="{{ 视频标题 }}" src="{{ 视频封面 }}">
                </figure>
                <span class="duration">00:04:17</span>
                            </a>
        </div>
        <div class="card-content px-0 py-2">
            <div class="content">
                <h4 class="is-size-7 is-size-7-mobile mb-1 has-text-line-2 has-text-weight-normal">
                    <a target="_self" href="/video/view/3da1ba5fcd81857a7b53" class="has-text-grey-dark">
                        {{ 视频标题 }}                   </a>
                </h4>
                <p class="mb-1 has-text-grey is-size-8">
                    作者: <a class="79ab24 has-text-grey-dark" href="{{ 作者地址 }}">{{ 作者名 }}</a>
                </p>
                <p class="has-text-grey is-size-8">
                    <time datetime="35小时前">35小时前</time>&nbsp;|&nbsp;12万次播放
                </p>
            </div>
        </div>
    </article>
</div>                    


</div>
</div>
</div>

  {% endblock %}